<template>
  <div class="breadcrumb-container">
    <div class="page-title">
      <h2>{{ currentPageTitle }}</h2>
      <p class="page-description">{{ pageDescription }}</p>
    </div>
    
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">
        <i class="el-icon-s-home"></i> 首页
      </el-breadcrumb-item>
      <el-breadcrumb-item 
        v-for="(item, index) in breadcrumbItems" 
        :key="index"
        :to="index < breadcrumbItems.length - 1 ? { path: item.path } : null">
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumbs',
  data() {
    return {
      pageDescriptions: {
        '/dashboard': '查看系统概览和关键数据指标',
        '/products': '管理您的农产品信息和库存',
        '/orders': '查看和处理客户订单',
        '/users': '管理系统用户和权限',
        '/settings': '配置系统参数和个人信息'
      }
    }
  },
  computed: {
    breadcrumbItems() {
      return this.$route.matched
        .filter(item => item.meta && item.meta.title)
        .map(item => ({
          path: item.path,
          title: item.meta.title
        }));
    },
    currentPageTitle() {
      const matched = this.$route.matched;
      if (matched.length > 0) {
        const lastMatched = matched[matched.length - 1];
        return lastMatched.meta && lastMatched.meta.title ? lastMatched.meta.title : '页面标题';
      }
      return '页面标题';
    },
    pageDescription() {
      // 获取当前路由的基本路径
      const basePath = '/' + this.$route.path.split('/')[1];
      return this.pageDescriptions[basePath] || '管理您的农产品金融销售业务';
    }
  }
}
</script>

<style lang="less" scoped>
.breadcrumb-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-title {
  margin-bottom: 10px;
  
  h2 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
  }
  
  .page-description {
    font-size: 13px;
    color: #909399;
    margin: 0;
  }
}

.el-breadcrumb {
  font-size: 13px;
  
  .el-breadcrumb__inner {
    color: #909399;
    font-weight: 400;
    
    &.is-link {
      color: #4caf50;
      font-weight: 500;
      
      &:hover {
        color: #2e7d32;
      }
    }
  }
  
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #606266;
    font-weight: 500;
  }
  
  .el-icon-s-home {
    margin-right: 4px;
  }
}
</style>